<template>
    <el-container>
      <el-aside>
        <el-button type="success" @click="dialogVisibleDir=!dialogVisibleDir">新建</el-button>
        <el-input
            v-model="query"
            placeholder="Please enter keyword"
            @input="onQueryChanged"
        />

        <el-tree :data="tableData" :props="props" :load="loadNode" lazy :height="750" id="tree">
          <template #default="{ node, data }">
            <div class="tree_operation" @contextmenu="handleRightClick($event,data,node)">
              <el-icon><Folder /></el-icon>
              <span >{{ data.name }}</span>
            </div>
          </template>
        </el-tree>
      </el-aside>
      <el-main>
      </el-main>
      </el-container>


      <div id="custom-menu">
        <ul>
          <li @click="CreateTree">新建目录</li>
          <li>新建工具</li>
          <li>删除</li>
        </ul>
      </div>

  <el-dialog v-model="dialogVisibleDir" title="新建目录" width="25%">
    <el-form :model="form" label-width="65px">
        <el-form-item label="目录名">
          <el-input v-model="form.name" :width="120"/>
        </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="OnSubmit">创建</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogVisible" title="新建子目录" width="25%">
    <el-form :model="form" label-width="65px">
        <h3>当前目录：{{cur_father}}</h3>
        <el-divider border-style="dashed" />
        <el-form-item label="目录名">
          <el-input v-model="form.name" :width="120"/>
        </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="OnSubmit">创建</el-button>
      </span>
    </template>
  </el-dialog>

</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import { ElTreeV2} from 'element-plus'
import {Toolmeau} from './tool'
import {table} from "@/api/table";
import type Node from 'element-plus/es/components/tree/src/model/node'
const tableData = ref([])

interface Tree {
  id:number,
  name: string
  childNodes?: Tree[]
  leaf?: boolean
}

const cur_father = ref("")
const cur_data = ref()
const cur_node = ref(Node)
const form = ref({
  name: "",
  father:0,
})

const dialogVisible = ref(false)
const dialogVisibleDir = ref(false)
const query = ref('')
const treeRef = ref<InstanceType<typeof ElTreeV2>>()

function handleRightClick(event,data,node) {
  var customMenu = document.getElementById("custom-menu");
  customMenu.style.display = "block";
  customMenu.style.left = event.clientX + 'px';
  customMenu.style.top = event.clientY + 'px';
  cur_data.value = data
  cur_node.value= node
  console.log(node)
}

const props = {
  value: 'name',
  label: 'name',
  children: 'childNodes',
}


const loadNode = (node, resolve) => {
  if (node.level === 0) {
    return resolve([])
  }
  setTimeout(async () => {
    var data =  await ListToolChild(node)
    if (data.length == 0) {
      resolve([])
    }else{
      resolve(data)
    }

  }, 500)
}

onMounted(()=>{
  var tree = document.getElementById("tree");
  tree.addEventListener('contextmenu', function(event) {
    event.preventDefault(); // 取消默认的右键菜单行为
  })

  document.addEventListener('mouseup', function(event) {
    if (event.button === 1 ||event.button == 0) { // event.button表示按下的鼠标按钮编号，2表示右键
      var customMenu = document.getElementById("custom-menu");
      customMenu.style.display = "none";
    }
  });
  ListToolMeau()
})

const onQueryChanged = (query: string) => {
  treeRef.value!.filter(query)
}


const CreateTree = () => {
  cur_father.value = cur_data.value.name
  form.value.father = cur_data.value.id
  dialogVisible.value = true
  console.log(cur_node.value)
  console.log(cur_data.value)
}

const OnSubmit = async () => {
  if (!cur_data.value.childNodes) {
    cur_data.value.childNodes = []
  }
  var res = await Toolmeau.Create(form.value)
  console.log(res)
  var newChild = {id:res.data.id,childNodes:[],name:res.data.name}
  cur_data.value.childNodes.push(newChild)
  dialogVisible.value = false
  dialogVisibleDir.value = false
}

const ListToolMeau = async ()=>{
  tableData.value = await Toolmeau.List(table.page.value, table.size.value)
}

const ListToolChild = async (node)=>{
  return  await Toolmeau.List(table.page.value, table.size.value,{"father":node.data.id})
}


</script>
<style lang="scss" scoped>
@import "@/styles/webkit.scss";
.el-aside {
  width: 200px;
  border-right: 1px solid #a9a4a4;
}

.el-aside .el-tree{
  height: 80%;
  max-height: 94%;
  width: 198px;
}

.tree_operation {
  width: 100%;
}

.tree_operation:hover .tree_operation_list{
  display: block;
  margin-left: 30px;
  float: right;
}
.tree_operation .el-icon {
  margin-right: 3px;
}


.tree_operation_list {
  display: none;
  float: right;
}

.tree_operation_list:hover {
  background-color: #eee6e6;
  border-radius: 3px;
  text-align: center;
}

.tree_operation_list > .el-dropdown {
  margin-left: 25px;
}


.tree_operation_list > .el-dropdown:first-child {
  margin-left: 15px;
  color:green;
  border: none;
}

.el-icon{
  border: none;
}

.morefilled:hover {
  border: none;
}

#custom-menu {
  display: none; /* 初始状态下不显示 */
  position: absolute;
  background-color: #f9f9f9;
  font-family: 微软雅黑;
  min-width: 120px;
  border-radius: 10px;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, .2);
}

#custom-menu ul li {
  padding: 8px 16px;
  cursor: pointer;
  list-style: none;
}

#custom-menu ul li:hover {
  background-color: rgba(194, 191, 191, 0.92);
}
</style>